<template>
	<view class="main-box">
		<view class="navigator-bar" :style="style">
			<image class="back-img" src="/static/backArrow2.png" @click="openPopup()"></image>
			<text class="page-title">动态</text>
			<view class="submit-button" @click="publishDynamic()">发布</view>
		</view>
		<textarea class="dynamic-input" v-model="content" placeholder="写点什么吧...(最多200字)"></textarea>
		<view class="img-box">
			<view class="content-img-box" v-for="img of imgs">
				<image class="content-img" :src="img" mode="aspectFill"></image>
				<image class="close-img" src="/static/picDelete.png" @click="deleteImage(img)"></image>
			</view>
			<view class="add-img-box" v-if="imgs.length < maxImgNum" @click="chooseImages()">
				<text class="add-text">+</text>
			</view>
		</view>
		<view class="add-activity-box" @click="addActivity()" v-if="!activity">
			<image class="add-activity-img" src="/static/chartAdd.png"></image>
			<text class="add-activity-text">添加活动</text>
		</view>
		<view class="activity-box" v-if="activity">
			<view class="activity-img-box">
				<image class="activity-img" :src="activity.cover"></image>
			</view>
			<view class="activity-content">
				<view class="activity-title">{{ activity.name }}</view>
				<view class="price" v-if="activity.cost">¥{{activity.cost}}<text class="price-unit">/人</text></view>
				<view class="free" v-if="!activity.cost">免费</view>
			</view>
			<view class="remove-box" @click="removeActivity()">
				<image class="remove-img" src="/static/searchLogDelete.png"></image>
			</view>
		</view>
		<view class="location-box">
			<view class="my-location" @click="chooseLocation()">
				<image class="my-location-img" src="/static/listLocation.png"></image>
				<text class="my-location-text">{{ myLocationText }}</text>
			</view>
			<!-- <scroll-view scroll-x="true" class="location-list">
				<view class="location-item" @click="quickChooseLocation('新街口太平洋广场')">新街口太平洋广场</view>
				<view class="location-item">新街口太平洋广场</view>
				<view class="location-item">新街口太平洋广场</view>
				<view class="location-item">新街口太平洋广场</view>
				<view class="location-item">新街口太平洋广场</view>
			</scroll-view> -->
		</view>
		<uni-popup ref="bottomPopup" :is-mask-click="false" type="bottom" :safe-area="false"
			mask-background-color="rgba(0,0,0,0.85)">
			<view class="quit-popup" :style="{'padding-bottom': safeBottom + 'px'}">
				<view class="popup-title">确认退出编辑？</view>
				<view class="popup-text">退出后当前编辑内容将删除！</view>
				<view class="button-box">
					<view class="cancel-button" @click="closePopup()">再想想</view>
					<view class="confirm-button" @click="back()">退出</view>
				</view>
				<view style="height: 40rpx;"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				style: 'margin-top: 0px;',
				content: '',
				imgs: [],
				maxImgNum: 9,
				myLocationText: '不显示位置',
				activity: null,
				safeBottom: 0
			};
		},
		onLoad() {
			this.safeBottom = this.$safeBottom;
			this.style = `margin-top: ${this.$safeTop}px`;
			this.getLocation();
			uni.$on('chooseActivity', (activity) => {
				this.activity = activity;
			});
			uni.$on('chooseLocation', (location) => {
				this.myLocationText = location;
			});
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			publishDynamic() {
				if (!this.content && this.imgs.length < 1) {
					uni.showToast({
						title: '说点什么吧...',
						icon: 'none'
					})
					return;
				}
				const params = {
					content: this.content
				}
				if (this.imgs.length > 0) {
					params.images = this.imgs.join(',');
				}
				if (this.myLocationText !== '不显示位置') {
					params.place = this.myLocationText;
				}
				if (this.activity) {
					params.activityId = this.activity.id;
				}
				this.$apis.publishDynamic(params).then((res) => {
					if (res.code === 0) {
						uni.showToast({
							title: '发布成功!',
							icon: 'success'
						})
						uni.navigateBack();
					}
				});
			},
			chooseLocation() {
				uni.navigateTo({
					url: '/pages/chooseLocation'
				})
			},
			quickChooseLocation(location) {
				this.myLocationText = location;
			},
			chooseImages() {
				uni.chooseImage({
					count: this.maxImgNum - this.imgs.length,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (ret) => {
						const params = {
							files: ret.tempFilePaths
						}
						this.$apis.uploadFiles(params).then((res) => {
							console.log(res);
							if (res.code === 0) {
								res.data.forEach(item => {
									this.imgs.push(item.url);
								})
							}
						});
					}
				})
			},
			deleteImage(img) {
				let index = this.imgs.findIndex(item => item === img);
				this.imgs.splice(index, 1);
			},
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: (res) => {
						if (res.address.poiName) {
							this.myLocationText = res.address.poiName;
						}
					}
				})
			},
			addActivity() {
				uni.navigateTo({
					url: '/pages/chooseActivity'
				})
			},
			removeActivity() {
				this.activity = null;
			},
			openPopup() {
				this.$refs.bottomPopup.open();
			},
			closePopup() {
				this.$refs.bottomPopup.close();
			}
		}
	}
</script>

<style lang="scss">
	.main-box {
		width: 100vw;
		height: 100vh;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;

		.navigator-bar {
			width: 100vw;
			height: 86rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.back-img {
				width: 24rpx;
				height: 40rpx;
				margin-left: 42rpx;
				z-index: 10;
			}

			.page-title {
				font-size: 38rpx;
				font-weight: bold;
				color: #222222;
				position: absolute;
				width: 100vw;
				line-height: 38rpx;
				text-align: center;
			}

			.submit-button {
				margin-right: 42rpx;
				width: 123rpx;
				height: 61rpx;
				background: #FF5E2E;
				border-radius: 31rpx;
				font-size: 31rpx;
				line-height: 61rpx;
				text-align: center;
				font-weight: 400;
				color: #FFFFFF;
				z-index: 10;
			}
		}

		.dynamic-input {
			margin-top: 48rpx;
			width: 654rpx;
			height: 500rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #222222;
		}

		.img-box {
			margin-top: 32rpx;
			margin-left: 18rpx;
			width: 672rpx;
			display: flex;
			flex-wrap: wrap;

			.content-img-box {
				position: relative;
				width: 150rpx;
				height: 150rpx;
				margin-right: 18rpx;
				margin-bottom: 18rpx;

				.content-img {
					width: 150rpx;
					height: 150rpx;
					border-radius: 28rpx;
				}

				.close-img {
					width: 42rpx;
					height: 42rpx;
					position: absolute;
					top: 8rpx;
					right: 8rpx;
				}
			}

			.add-img-box {
				width: 150rpx;
				height: 150rpx;
				border-radius: 28rpx;
				border: 2rpx solid #999999;
				line-height: 130rpx;
				text-align: center;
				font-size: 100rpx;
				color: #999999;
				margin-bottom: 18rpx;
			}
		}

		.add-activity-box {
			display: flex;
			width: 100%;
			justify-content: flex-start;
			align-items: center;
			width: 654rpx;
			margin-top: 24rpx;
			margin-bottom: 24rpx;

			.add-activity-img {
				width: 32rpx;
				height: 32rpx;
			}

			.add-activity-text {
				font-size: 28rpx;
				font-weight: 400;
				color: #222222;
				margin-left: 16rpx;
			}
		}

		.activity-box {
			width: 654rpx;
			height: 180rpx;
			display: flex;
			align-items: center;
			background: #F6F7F9;
			border-radius: 28rpx;
			margin-top: 24rpx;

			.activity-img-box {
				width: 173rpx;
				height: 136rpx;
				margin-left: 24rpx;
				margin-right: 24rpx;

				.activity-img {
					width: 173rpx;
					height: 136rpx;
					border-radius: 24rpx;
				}
			}

			.activity-content {
				width: 360rpx;
				height: 136rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-evenly;

				.activity-title {
					font-size: 28rpx;
					font-weight: bold;
					color: #222222;
				}

				.price {
					font-size: 32rpx;
					font-weight: bold;
					color: #FF5E2E;

					.price-unit {
						font-size: 20rpx;
					}
				}

				.free {
					font-size: 32rpx;
					font-weight: bold;
					color: #31B57E;
				}
			}

			.remove-box {
				margin-left: 24rpx;

				.remove-img {
					width: 32rpx;
					height: 34rpx;
				}
			}
		}

		.location-box {
			margin-top: 30rpx;
			width: 654rpx;

			.my-location {
				display: flex;
				align-items: center;

				.my-location-img {
					width: 20rpx;
					height: 24rpx;
				}

				.my-location-text {
					margin-left: 12rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
				}
			}

			.location-list {
				margin-top: 24rpx;
				width: 100%;
				overflow-x: auto;
				white-space: nowrap;

				.location-item {
					display: inline-block;
					margin-right: 20rpx;
					padding: 4rpx 12rpx 4rpx 12rpx;
					background: #F6F7F9;
					border-radius: 20rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
				}
			}
		}

		.quit-popup {
			width: 100vw;
			background-color: white;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 60rpx;
			border-radius: 48rpx 48rpx 0 0;

			.popup-title {
				font-size: 40rpx;
				font-weight: bold;
				color: #03122C;
			}

			.popup-text {
				font-size: 32rpx;
				font-weight: 400;
				color: #222222;
				width: 480rpx;
				margin-top: 44rpx;
				margin-bottom: 100rpx;
			}

			.button-box {
				display: flex;
				justify-content: space-evenly;
				width: 100%;

				.cancel-button {
					width: 280rpx;
					height: 100rpx;
					background: #F6F7F9;
					border-radius: 24rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #222222;
					text-align: center;
					line-height: 100rpx;
				}

				.confirm-button {
					width: 280rpx;
					height: 100rpx;
					background: #FF5E2E;
					border-radius: 24rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					line-height: 100rpx;
				}
			}
		}
	}
</style>
